var jsonData = [
    {   //5
        width: 400,
        top: 20,
        left: 750,
        opacity: .20,
        zIndex: 2
    },
    {   //  1
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
    },
    {  // 2
        width: 600,
        top: 70,
        left: 0,
        opacity: .80,
        zIndex: 3
    },
    {   // 3
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
    },
    {  // 4
        width: 600,
        top: 70,
        left: 600,
        opacity: .80,
        zIndex: 3
    }
];
window.addEventListener("DOMContentLoaded",()=>{
    var oLis=document.querySelectorAll(".wrap li");
    jsonData.forEach((item,index)=>{
        tools.animate(oLis[index],item);
    })
    var oWrap=document.querySelector("#wrap");
    var oArrow=document.querySelector("#arrow");

    oWrap.onmouseenter=()=>{
        tools.animate(oArrow,{opacity:1})
    }
    oWrap.onmouseleave=()=>{
        tools.animate(oArrow,{opacity:0})
    }

    var flag=true;
    oArrow.children[0].onclick=function(){
        if(flag){
            flag=false;
            jsonData.unshift(jsonData.pop());
            jsonData.forEach((item,index)=>{
                tools.animate(oLis[index],item,()=>{
                    flag=true;
                })
            })
        }
    }
    oArrow.children[1].onclick=function(){
        if(flag){
            flag=false;
            jsonData.push(jsonData.shift());
            jsonData.forEach((item,index)=>{
                tools.animate(oLis[index],item,()=>{
                    flag=true;
                })
            })
        }
    }
})